<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理系统 - MyBatis高级应用作业</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #667eea;
            --secondary: #764ba2;
            --success: #10b981;
            --info: #3b82f6;
            --warning: #f59e0b;
            --danger: #ef4444;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            min-height: 100vh;
            color: #333;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
        }

        .header-section {
            text-align: center;
            color: white;
            margin-bottom: 50px;
            padding: 60px 20px;
        }

        .header-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
            background: linear-gradient(45deg, #fff, #e2e8f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header-subtitle {
            font-size: 1.3rem;
            opacity: 0.9;
            margin-bottom: 25px;
        }

        .status-badge {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            padding: 15px 25px;
            margin-top: 20px;
        }

        .task-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .task-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #e2e8f0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .task-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

        .task-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 60px rgba(102, 126, 234, 0.15);
        }

        .task-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .task-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            color: white;
            font-size: 1.5rem;
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .task-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 5px;
        }

        .task-description {
            color: #718096;
            margin-bottom: 20px;
            line-height: 1.6;
            font-size: 1rem;
        }

        .api-endpoint {
            background: #1a202c;
            color: #e2e8f0;
            padding: 15px 20px;
            border-radius: 12px;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 0.9rem;
            margin: 15px 0;
            border-left: 4px solid var(--primary);
            word-break: break-all;
        }

        .method-badge {
            display: inline-block;
            background: var(--success);
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            margin-right: 12px;
            letter-spacing: 0.5px;
        }

        .test-link {
            display: block;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 14px 20px;
            border-radius: 12px;
            text-decoration: none;
            text-align: center;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            width: 100%;
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }

        .test-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .test-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
            color: white;
            text-decoration: none;
        }

        .test-link:hover::before {
            left: 100%;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .feature-item {
            text-align: center;
            padding: 30px 20px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 15px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .feature-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15);
            background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
        }

        .feature-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 15px;
        }

        .feature-title {
            color: #1a202c;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .feature-desc {
            color: #718096;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .debug-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-top: 40px;
        }

        .api-list {
            list-style: none;
            padding: 0;
        }

        .api-list li {
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .api-list li:last-child {
            border-bottom: none;
        }

        .api-list a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .api-list a:hover {
            color: var(--secondary);
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            color: white;
            margin-top: 60px;
            padding: 30px 20px;
            opacity: 0.8;
        }

        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
            100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
        }

        @media (max-width: 768px) {
            .task-grid {
                grid-template-columns: 1fr;
            }

            .header-title {
                font-size: 2.5rem;
            }

            .task-card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container py-5">
    <!-- 头部区域 -->
    <div class="header-section">
        <h1 class="header-title floating">
            <i class="fas fa-shield-alt me-3"></i>权限管理系统
        </h1>
        <p class="header-subtitle">MyBatis高级应用 - 多表联合查询实践作业</p>

        <div class="status-badge glass-card d-inline-block">
            <div class="row align-items-center">
                <div class="col-auto">
                    <i class="fas fa-check-circle me-2" style="color: #68d391;"></i>
                </div>
                <div class="col">
                    <strong>系统状态:</strong>
                    <span id="statusInfo" style="color: #68d391;">✅ 正常运行中</span>
                    <br>
                    <small>数据库连接: <span id="dbStatus">已连接</span></small>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要功能区域 -->
    <div class="glass-card p-4 p-md-5 mb-5">
        <h2 class="section-title mb-4">
            <i class="fas fa-tasks me-3"></i>作业任务概览
        </h2>

        <div class="task-grid">
            <!-- 任务一 -->
            <div class="task-card">
                <div class="task-header">
                    <div class="task-icon">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div>
                        <div class="task-title">任务一：用户角色查询</div>
                        <small class="text-muted">一对多关系映射</small>
                    </div>
                </div>
                <div class="task-description">
                    查询特定用户及其拥有的所有角色信息，展示MyBatis一对多查询的强大功能。
                </div>
                <div class="api-endpoint">
                    <span class="method-badge method-get">GET</span>
                    /api/users/username/{username}
                </div>
                <a href="management.jsp?section=task1"
                   class="test-link pulse">
                    <i class="fas fa-desktop me-2"></i>查看功能演示
                </a>
            </div>

            <!-- 任务二 -->
            <div class="task-card">
                <div class="task-header">
                    <div class="task-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <div class="task-title">任务二：角色权限查询</div>
                        <small class="text-muted">多层一对多查询</small>
                    </div>
                </div>
                <div class="task-description">
                    查询角色详情及其菜单权限，实现复杂的多层关联查询和数据映射。
                </div>
                <div class="api-endpoint">
                    <span class="method-badge method-get">GET</span>
                    /api/roles/{roleId}
                </div>
                <a href="management.jsp?section=task2"
                   class="test-link pulse">
                    <i class="fas fa-desktop me-2"></i>查看功能演示
                </a>
            </div>

            <!-- 任务三 -->
            <div class="task-card">
                <div class="task-header">
                    <div class="task-icon">
                        <i class="fas fa-search-plus"></i>
                    </div>
                    <div>
                        <div class="task-title">任务三：综合查询</div>
                        <small class="text-muted">动态SQL + 多表关联</small>
                    </div>
                </div>
                <div class="task-description">
                    基于条件搜索用户，关联查询角色和权限信息，展示动态SQL的灵活应用。
                </div>
                <div class="api-endpoint">
                    <span class="method-badge method-get">GET</span>
                    /api/users/search?username=admin&page=1&pageSize=10
                </div>
                <a href="management.jsp?section=task3"
                   class="test-link pulse">
                    <i class="fas fa-desktop me-2"></i>查看功能演示
                </a>
            </div>

            <!-- 额外功能 -->
            <div class="task-card">
                <div class="task-header">
                    <div class="task-icon">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div>
                        <div class="task-title">所有角色查询</div>
                        <small class="text-muted">分页数据展示</small>
                    </div>
                </div>
                <div class="task-description">
                    分页查询所有角色及其关联的菜单权限，实现完整的数据分页功能。
                </div>
                <div class="api-endpoint">
                    <span class="method-badge method-get">GET</span>
                    /api/roles?page=1&pageSize=10
                </div>
                <a href="management.jsp?section=task3"
                   class="test-link pulse">
                    <i class="fas fa-desktop me-2"></i>查看功能演示
                </a>
            </div>
        </div>
    </div>

    <!-- 技术特性 -->
    <div class="glass-card p-4 p-md-5 mb-5">
        <h2 class="section-title mb-4">
            <i class="fas fa-cogs me-3"></i>技术特性展示
        </h2>

        <div class="feature-grid">
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-database"></i>
                </div>
                <div class="feature-title">MyBatis ORM</div>
                <div class="feature-desc">强大的对象关系映射，简化数据库操作</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-code"></i>
                </div>
                <div class="feature-title">动态SQL</div>
                <div class="feature-desc">灵活的查询条件构建，支持复杂业务逻辑</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-sitemap"></i>
                </div>
                <div class="feature-title">关联映射</div>
                <div class="feature-desc">一对多、多对多关系完美处理</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-table"></i>
                </div>
                <div class="feature-title">分页查询</div>
                <div class="feature-desc">高效的数据分页，提升用户体验</div>
            </div>
        </div>
    </div>

    <!-- 快速功能测试 -->
    <div class="debug-section">
        <h3 class="mb-4">
            <i class="fas fa-bolt me-2"></i>快速功能测试
        </h3>
        <div class="row">
            <div class="col-md-6">
                <div class="api-list">
                    <li>
                        <a href="management.jsp?section=task1">
                            <i class="fas fa-user me-2"></i>用户角色查询 - 一对多查询演示
                        </a>
                    </li>
                    <li>
                        <a href="management.jsp?section=task2">
                            <i class="fas fa-shield-alt me-2"></i>角色权限查询 - 多层关联演示
                        </a>
                    </li>
                </div>
            </div>
            <div class="col-md-6">
                <div class="api-list">
                    <li>
                        <a href="management.jsp?section=task3">
                            <i class="fas fa-search me-2"></i>综合用户查询 - 动态SQL演示
                        </a>
                    </li>
                    <li>
                        <a href="management.jsp?section=task4">
                            <i class="fas fa-cogs me-2"></i>权限维护功能 - 数据操作演示
                        </a>
                    </li>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <p>© 2025 MyBatis高级应用课程实践作业 - 权限管理系统</p>
    <p><i class="fas fa-server me-2"></i>部署路径: /mybatis-homework</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', function() {
        // 添加加载动画
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.8s ease';

        setTimeout(() => {
            document.body.style.opacity = '1';
        }, 100);

        // 更新状态信息
        const statusElement = document.getElementById('statusInfo');
        const dbStatusElement = document.getElementById('dbStatus');

        // 模拟系统检查
        setTimeout(() => {
            statusElement.innerHTML = '✅ 系统运行正常';
            statusElement.style.color = '#10b981';
            dbStatusElement.innerHTML = '✅ 已连接';
            dbStatusElement.style.color = '#10b981';
        }, 1500);

        console.log('🚀 权限管理系统已就绪');
        console.log('📊 数据库连接: 正常');
        console.log('🔗 功能演示: 可访问');
    });

    // 卡片悬停效果
    document.querySelectorAll('.task-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px) scale(1.02)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
</script>
</body>
</html>
